<template>
    <router-link :to="`/playlist/${item.id}`" tag="li" class="item">
        <div>
            <img :src="item.picUrl ? item.picUrl : item.coverImgUrl"/>
            <span>{{item.playCount|formatNum}}</span>
        </div>
        <p>{{item.name}}</p>
    </router-link>
</template>
<script>
export default {
    name:"ListItem",
    props:['item'],
    created(){
    },
    // 
    filters:{
        formatNum(val){
            return (val/10000).toFixed(1)+"万";
        }
    }
}
</script>
<style lang="less" scoped>
li.item{
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    div{
        position: relative;
        img{
            vertical-align: middle;
            border: 0;
        }
        span{
            position: absolute;
            right: 5px;
            top: 2px;
            z-index: 3;
            padding-left: 13px;
            color: #fff;
            font-size: 12px;
            background-position: 0;
            background-repeat: no-repeat;
            background-size: 11px 10px;
            text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
            background-image: url();
        }
    }
    &>p{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 6px 2px 0 6px;
        min-height: 30px;
        line-height: 1.2;
        font-size: 13px;
    }
}
</style>